<template>
    <el-dialog
            :title="dialogTitle"
            :visible.sync="dialogVisible"
            :close-on-click-modal="false"
            :before-close="dialogClose"
            custom-class="hy-dialog power-dialog">
        <div class="dialog-content">

            <div class="tree_wrap">
                <div class="tree-box" v-for="item in treeList" :style="`width: ${ 100 / treeList.length }%`">
                    <vue-scroll :ops="$root.scrollOpsY">
                        <el-tree
                                :data="item"
                                show-checkbox
                                node-key="id"
                                :default-expanded-keys="[2, 3]"
                                :default-checked-keys="[5]"
                                :props="defaultProps">
                        </el-tree>
                    </vue-scroll>
                </div>
            </div>

            <br/>
            <el-button type="primary" @click="dialogClose()">确认</el-button>
            <el-button type="info"  @click="dialogClose()">取消</el-button>

        </div>
    </el-dialog>
</template>

<script>
    export default {
        props: {
            treeList: {
                type: Array,
                default: function () {
                    return []
                }
            },
        },
        data() {
            return {
                dialogTitle: '权限详情',
                dialogVisible: false,
                defaultProps: {
                    children: 'children',
                    label: 'label'
                },
            }
        },
        methods: {
            dialogClose() {
                this.dialogVisible = false;
            },
        },
        mounted() {

        }
    }
</script>

<style lang="less">
    .power-dialog {
        height: 680px;

        .el-dialog__body {
            width: 100%;
            height: calc( 100% - 113px );
            padding-left: 74px;
            padding-right: 104px;
            padding-bottom: 70px;
            box-sizing: border-box;

            >.dialog-content {
                width: 100%;
                height: 100%;
                text-align: center;

                >.tree_wrap {
                    width: 100%;
                    height: calc( 100% - 90px );

                    .tree-box {
                        display: inline-block;
                        vertical-align: top;
                        height: 100%;
                        text-align: left;
                        padding-left: 30px;
                        box-sizing: border-box;
                        border-right: 1px solid #EEEFF2;

                        .el-tree {

                            .el-checkbox {
                                width: 22px;
                                height: 22px;
                                margin-right: 12px;

                                .el-checkbox__input {


                                    .el-checkbox__inner {
                                        width: 22px;
                                        height: 22px;

                                        &:after {
                                            height: 8px;
                                            top: 4px;
                                            left: 8px;
                                        }
                                    }
                                }
                            }

                            .el-tree-node__label {
                                font-size: 18px;
                                color: #232323;
                            }

                            .el-tree-node__content {
                                margin-bottom: 32px;
                            }

                            .el-checkbox__input.is-indeterminate .el-checkbox__inner::before {
                                top: 8px;
                            }

                            >.el-tree-node {

                                >.el-tree-node__content {

                                    >.el-tree-node__expand-icon {
                                        color: #9A9FAF;
                                        font-size: 17px;
                                    }

                                    >.el-tree-node__label {
                                        font-weight: 600;
                                    }
                                }
                            }
                        }

                        &:last-child {
                            border-right: 0;
                        }
                    }
                }
            }



            .el-button {
                width: 120px;
                height: 50px;
                border-radius: 4px;
                font-size: 22px;
                margin-top: 40px;
            }

            .el-button+.el-button {
                margin-left: 50px;
            }
        }
    }
</style>
